<template>
  <div class="home">
    <!-- 顶部标题 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar title="订单" custom-class="nav_header" />
      </van-sticky>
    </div>
    <!-- 头部标签区域 -->
    <div class="tab_content">
      <van-sticky>
        <van-tabs
          v-model="active"
          @click="onClick"
          title-active-color="#144a9e"
          color="#144a9e"
        >
          <van-tab title="全部" label="全部"></van-tab>
          <van-tab title="待接单" label="待接单"></van-tab>
          <van-tab title="待确认" label="待确认"></van-tab>
          <van-tab title="待服务" label="待服务"></van-tab>
          <van-tab title="已完成" label="已完成"></van-tab>
        </van-tabs>
      </van-sticky>
    </div>
    <!-- 订单展示区 -->
    <div class="order">
      <van-card
        v-for="order in orderData"
        :key="order.id"
        :thumb="order.customer.userFace"
        :status="order.status"
        @click="toDetail(order)"
      >
        <div slot="title">
          <span id="username"
            ><b>{{ order.customer.username }}</b></span
          >
          <span id="status">{{ order.status }}</span>
        </div>
        <div slot="desc" style="margin-top: 20px">
          <span>{{
            order.address.province +
            order.address.city +
            order.address.area +
            order.address.address
          }}</span>
        </div>
        <div slot="bottom">
          <span>{{ order.orderTime | dateFormat }}</span>
          <span id="price">{{ "¥" + order.total }}</span>
        </div>
      </van-card>
      <div style="height: 80px"></div>
    </div>
  </div>
</template>

<script>
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      active: 0,
      status: "",
    };
  },
  computed: {
    // 引入order vuex中的方法
    ...mapState("order", ["orderData"]),
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入order vuex中的方法
    ...mapActions("order", ["getAllOrderData"]),
    ...mapActions("user", ["getUserInfo"]),
    // 切换tabs
    onClick(name, title) {
      if (title == "全部") {
        this.queryOrder();
      } else {
        this.queryOrder(title);
      }
    },
    // 查询订单数据
    queryOrder(title) {
      var data = {
        page: 1,
        pageSize: 50,
        employeeId: this.userInfo.id,
        status: title,
      };
      // 调用vuex中的方法 传参
      this.getAllOrderData(data);
    },
    // 跳转到订单详情
    toDetail(order) {
      // 使用編程式导航进行路由的跳转
      this.$router.push({
        path: "/detail",
        query: {
          order,
        },
      });
    },
  },
  created() {
    this.getUserInfo().then((r) => {
      this.employeeId = this.userInfo.id;
      // 自动获取产品数据
    this.queryOrder();
    });
    
  },
};
</script>

<style scoped>
#price {
  float: right;
}
#status {
  float: right;
  color: #f8825d;
}
#username {
  font-size: 18px;
}
.order {
  margin-top: 1em;
  padding: 0 2em;
}
.van-card {
  margin: 20px 0;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
  padding: 1em 1em;
  cursor: pointer;
}
.order .van-tabs__nav van-tabs__nav--line {
  background-color: #ccccff;
}
.header /deep/ .van-nav-bar__title {
  color: white !important;
  font-size: 16px;
}
.header /deep/ .van-nav-bar {
  height: 48px;
    background-image: linear-gradient(
90deg
,#bf73ff,#7579ff);
    text-align: center;
    line-height: 48px;
    color: #fff;
    letter-spacing: .4em;
}
</style>